<template>
<h2>显示列表页</h2>

房号表名称:<input type="text" v-model="NumberName">
具体房间号：<input type="text" v-model="RnumberNum">
<input type="button" value="查询" @click="LoadData">

<input type="button" value="批量删除" @click="Delte" style="margin-right: 20px;">

<table border="1">
    <thead>
        <tr>
            <td><input type="checkbox" v-model="quan" @change="qAll"></td>
            <td>房号名称</td>
            <td>房号楼层</td>
            <td>房号状态</td>
            <td>具体房间号</td>
            <td>操作列</td>
           
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in info">
            <td><input type="checkbox" :checked="fan" v-model="newArry" :value="item.Rnumber_Id" @change="fAll"></td>
            <td>{{item.Rnumber_Name}}</td>
            <td>{{item.Rnumber_Floor}}</td>
            <td>{{item.Rnumber_State==true?"空可入住":"已经有人入住"}}</td>
            <td>{{item.Rnumber_Num}}</td>
            <td>操作列
                <a href="#" style="margin-right: 20px;" @click="Del(item.Rnumber_Id)">删除</a>
                <a href="#" style="margin-right: 20px;" @click="Update(item.Rnumber_Id)">修改</a>
            </td>
           
        </tr>

    </tbody>
</table>

当前共{{pageInfo.totalCount  }}条, 当前页共{{pageInfo.pageSize  }}条,
当前页{{pageInfo.pageIndex  }}/{{pageInfo.pageCount  }}页

<span>
    <a href="#" style="margin-right: 20px;" @click="pageChange('F')">首页</a>
    <a href="#" style="margin-right: 20px;" @click="pageChange('U')">上一页</a>
    <a href="#" style="margin-right: 20px;" @click="pageChange('N')">下一页</a>
    <a href="#" style="margin-right: 20px;" @click="pageChange('E')">尾页</a>
</span>

</template>
import type { toValue } from "vue";
<script setup lang="ts">
import axios from "axios";
import { onMounted,ref } from "vue";
import { useRouter } from "vue-router";







const quan=ref(false);
const fan=ref(false);
const newArry=ref([])

//全选
const qAll=()=>{

    if(quan.value==true){
        fan.value=true;
        newArry.value=info.value.map((i:any)=>{
          return  i.Rnumber_Id
        })
    }
    else{
        fan.value=false;
        newArry.value=[];
    }

}

//反选
const fAll=()=>{


    if(newArry.value.length==info.value.length){
        quan.value=true;

    }
    else{
        quan.value=false
    }

}


//批量删除
const Delte=()=>{

    if(confirm("你确定要删除吗？")){
        axios.get('https://localhost:7153/api/T_RoomNumber/DeleteNumber',
        {
            params:{
                ids:newArry.value.toString()
            }
        }
        
        )
        .then(res=>{
            if(res.data>0){
                alert("删除成功");
                LoadData();
            }
            else{
                alert("删除失败");
            }
        })
    }


}


//修改跳转
const router=useRouter();


const Update=(NumberId:number)=>{

    
router.push({
    name:"UpdateNumber",
    params:{
        id:NumberId
    }
})


}


//单删
const Del=(NumberId:number)=>{

    if(confirm("你确定要删除吗?")){
        axios.get('https://localhost:7153/api/T_RoomNumber/DelNumber',
        {
            params:{
                RnumberId:NumberId
            }
        }
        
        )
        .then(res=>{
            if(res.data>0){
                alert("删除成功");
                LoadData();
            }
            else{
                alert("删除失败");
            }
        })
    }

}

const NumberName=ref("");
const RnumberNum=ref("");

const info:any=ref([{
    Rnumber_Id:0,
 Rnumber_Name: "",
 Rnumber_Floor: "",
 Rnumber_Num: "",
 Rnumber_State: true,
 


}])

//分页

const pageInfo=ref({
    pageIndex:1,
    pageSize:2,
    totalCount:0,
    pageCount:0


})


onMounted(()=>{
    LoadData();
})
//加载数据
const LoadData=()=>{


    axios.get('https://localhost:7153/api/T_RoomNumber/ShowRoomNumber',
    {
        params:{
            NumberName:NumberName.value,
            RnumberNum:RnumberNum.value,
            pageIndex:pageInfo.value.pageIndex,
            pageSize:pageInfo.value.pageSize

        }
    }
    
    )

    .then(res=>{

        info.value=res.data.Data_Info;
        pageInfo.value.totalCount=res.data.TotalCount;
        pageInfo.value.pageCount=res.data.PageCount
    })

}

///翻页
const pageChange=(choose:string)=>{

    switch(choose){
        case 'F':
            pageInfo.value.pageIndex=1;
            break;
            case 'U':
            pageInfo.value.pageIndex=pageInfo.value.pageIndex-1;
            break;
            case 'N':
            pageInfo.value.pageIndex=pageInfo.value.pageIndex+1;
            break;
            case 'E':
            pageInfo.value.pageIndex=pageInfo.value.pageCount;
            break;
    }
LoadData();

}

</script>